<template>
  <div id="sys_layout" class="sys_layout">
    <Row type="flex">
      <i-col :span="spanLeft" >
        <left-menu @toggleParentSpan="toggleSpan"></left-menu>
      </i-col>
      <i-col :span="spanRight" >
        <router-view></router-view>
      </i-col>
    </Row>
  </div>

</template>

<script>
  import LeftMenu from '../LeftMenu.vue'
  export default {
    components: {
      LeftMenu
    },
    name: 'sys-panel',
    data: function () {
      return {
        spanLeft: 3,
        spanRight: 21
      }
    },
    methods: {
      toggleSpan () {
        var screenWidth = window.innerWidth
        if (screenWidth < 640) {
          if (this.spanLeft === 4) {
            this.spanLeft = 8
            this.spanRight = 16
          } else {
            this.spanLeft = 4
            this.spanRight = 20
          }
        } else if (screenWidth > 640 && screenWidth < 768) {
          if (this.spanLeft === 4) {
            this.spanLeft = 2
            this.spanRight = 22
          } else {
            this.spanLeft = 4
            this.spanRight = 20
          }
        } else {
          if (this.spanLeft === 3) {
            this.spanLeft = 1
            this.spanRight = 23
          } else {
            this.spanLeft = 3
            this.spanRight = 21
          }
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .sys_layout {
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    min-height: 500px;
  }

</style>
